
<template>
    <el-tooltip effect="light" placement="left" :disabled="!isTip">
        <div slot="content" class="tip-content">{{text}}</div>
        <span>{{showText}}</span>
    </el-tooltip>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { truncate } from "lodash";
@Component({
    name: "ZbBtnText"
})
export default class ZbBtnText extends Vue {
    @Prop({ default: 15 }) maxlength!: Number;
    @Prop() text!: string;
    visible: boolean = false;
    get isTip() {
        return this.text.length > this.maxlength;
    }
    get showText() {
        const me = this as any;
        return me.isTip ? truncate(me.text, { length: me.maxlength }) : me.text;
    }
}
</script>
<style scoped lang="scss">
.tip-content {
    max-width: 300px;
}
</style>
